<template>
  <div class="content">
    <div class="left">
      <h4>全局参数</h4>
      <el-form :model="listForm" size="small">
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="列表循环变量(id)">
              <el-input placeholder="默认为item" />
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="为空提示(empty)">
              <el-input placeholder="默认无提示" />
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="循环变量(key)">
              <el-input placeholder="默认为变量i" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="取模值(mod)">
              <el-input placeholder="默认为2" />
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="行数(row)">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="排序字段(orderby)">
              <el-input />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="排序方式(orderway)">
              <el-input placeholder="默认为desc(降序))" />
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="偏移值(limit)">
              <el-input placeholder="默认为空， 例如：20,10" />
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="缓存时长(cache)(秒)">
              <el-input placeholder="默认为永久缓存" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <h4>特有参数</h4>
      <el-form :model="listForm" size="small">
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="请选择模型">
              <el-select v-model="listForm.module">
                <el-option
                  v-for="item in moduleData"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="请选择栏目">
              <el-select v-model="listForm.column">
                <el-option
                  v-for="item in columnData"
                  :key="item.id"
                  :label="item.title"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="栏目类型">
              <el-select v-model="listForm.columnType">
                <el-option label="模型1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="主表字段">
              <el-select v-model="listForm.mTablefield">
                <el-option label="模型1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="副表字段">
              <el-select v-model="listForm.sTablefield">
                <el-option label="模型1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="关联预载入">
              <el-select v-model="listForm.relation">
                <el-option label="模型1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="栏目字段">
              <el-select v-model="listForm.columnField">
                <el-option label="模型1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="会员字段">
              <el-select v-model="listForm.memberField">
                <el-option label="模型1" :value="1" />
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="8"><div class="grid-content bg-purple" />
            <el-form-item label="缓存时长(cache)(秒)">
              <el-input placeholder="默认为永久缓存" />
            </el-form-item>
          </el-col> -->
        </el-row>
      </el-form>
    </div>

    <div class="right">
      <h4>标签预览</h4>
      <div style="margin-top:15px; margin-bottom:20px">
        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" style="margin-bottom:15px" />
        <el-button class="dele" size="small">渲染标签结果</el-button>
        <el-button type="primary" size="small">复制标签</el-button>
      </div>
      <h4>执行结果</h4>
      <div style="margin-top:15px">
        <el-input type="textarea" :autosize="{ minRows: 6, maxRows: 6}" style="margin-bottom:15px" />
      </div>
    </div>
  </div>
</template>

<script>
import moduleApi from '@/api/module'
import columnApi from '@/api/column'
export default {
  data() {
    return {
      listForm: {},
      moduleData: [],
      columnData: []
    }
  },
  created() {
    this.getModule()
    this.getColumn()
  },
  methods: {
    // 模型列表
    getModule() {
      moduleApi.moduleList().then(res => {
        this.moduleData = res.data
      })
    },
    // 栏目列表
    getColumn() {
      columnApi.columnList({ website_id: 1 }).then(res => {
        // this.columnData = res.data
        this.getTreeData(res.data)
      })
    },
    getTreeData(data) {
      const columnArry = []
      for (var i = 0;i < data.length;i++) {
        columnArry.push({ 'id': data[i].id, 'title': data[i].title, 'parent_id': data[i].parent_id })
        if (data[i].children.length > 0) {
          for (var x = 0;x < data[i].children.length;x++) {
            columnArry.push({ 'id': data[i].children[x].id, 'title': data[i].children[x].title, 'parent_id': data[i].children[x].parent_id })
          }
        }
      }
      // 给parent_id!=0 的选项的title前加个标识
      columnArry.forEach(el => {
        if (el.parent_id != 0) {
          this.$set(el, 'title', ' --- ' + el.title)
        }
      })

      this.columnData = columnArry
    }
  }
}
</script>
<style >
.tabs .left .el-form  .el-form-item__label{
    font-weight: normal;
    color: #333;
 }
</style>
<style scoped lang='scss'>

.content{
    display: flex;
    justify-content: left;
    padding-top: 20px;
    padding-left:15px;
    background-color: #fff;
    .left{
        width: 50%;
        margin-right: 20px;
        }
    .right{
        width: calc(50% - 40px);
    }
    h4{
        font-weight: normal;
        padding-bottom: 10px;
        border-bottom: solid 1px #eee;
    }
}
</style>
